<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-09-09 17:11:34
 * @LastEditors: dh
 * @LastEditTime: 2025-09-08 14:26:56
-->
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>JS Bin</title>
	</head>

	<body>
		<div id="container">
			<div class="item item-1">1</div>
			<div class="item item-2">2</div>
			<div class="item item-3">3</div>
			<div class="item item-4">4</div>
			<div class="item item-5">5</div>
			<div class="item item-6">6</div>
			<div class="item item-7">7</div>
			<div class="item item-8">8</div>
			<div class="item item-9">9</div>
		</div>

		<div class="layout" style="height: 500px; width: 400px; margin-top: 50px; display: grid; grid-template-rows: auto 1fr auto">
			<div class="header" style="background-color: #0376c2">header</div>
			<div class="center" style="background-color: #4ba946">center</div>
			<div class="footer" style="background-color: #b5a87f">footer</div>
		</div>

		<style>
			span {
				font-size: 2em;
			}

			/* 列 grid-template-columns */
			#container {
				display: grid;
				width: 400px;
				/* 分3列 每列 50px ，可以百分比 ， auto */
				grid-template-columns: 50px 50px 50px;

				/* 分3列 每列 50px ，可以百分比 auto*/
				grid-template-columns: repeat(3, 50px);
				/* 分4列 间隔布局 50px 100px  ，可以百分比 auto*/
				grid-template-columns: repeat(2, 50px 100px);

				/* 自动填充，每列50px,可百分比 */
				grid-template-columns: repeat(auto-fill, 50px);
				/* 自动填充，间隔布局 50px 100px,可百分比 */
				grid-template-columns: repeat(auto-fill, 50px 100px);

				/* 分4列 宽度 1:2:3：4 */
				grid-template-columns: 1fr 2fr 3fr 4fr;

				/* 分6列 前面 100px 200px ；剩余部分 4:3:2:1 */
				grid-template-columns: 100px 200px 4fr 3fr 2fr 1fr;

				/* 分3列 ；第三列 不小于100px,不大300px，这里因为容器是400px，所以第三列是200px*/
				grid-template-columns: 100px 100px minmax(100px, 300px);
			}

			/* 行 grid-template-rows  用法同上*/
			#container {
				/* 每行 50px 分3行 */
				grid-template-rows: 50px 50px 50px;
			}

			/* grid-template 以上两个简写 */
			#container {
				/* grid-template: repeat(3, 50px) / repeat(3, 100px) */
			}

			.item {
				font-size: 2em;
				text-align: center;
				border: 1px solid #e5e4e9;
			}

			.item-1 {
				background-color: #ef342a;
			}

			.item-2 {
				background-color: #f68f26;
			}

			.item-3 {
				background-color: #4ba946;
			}

			.item-4 {
				background-color: #0376c2;
			}

			.item-5 {
				background-color: #c077af;
			}

			.item-6 {
				background-color: #f8d29d;
			}

			.item-7 {
				background-color: #b5a87f;
			}

			.item-8 {
				background-color: #d0e4a9;
			}

			.item-9 {
				background-color: #4dc7ec;
			}
		</style>
	</body>
</html>
